<div layout="row" layout-align="space-between center">

    <div layout="row" layout-align="start center">
        <div class="navigation-toggle" hide-gt-sm>
            <md-button class="md-icon-button" ng-click="vm.toggleHorizontalMobileMenu()"
                       aria-label="Toggle Mobile Navigation">
                <md-icon md-font-icon="icon-menu"></md-icon>
            </md-button>
        </div>

        <div class="logo" layout="row" layout-align="start center">
            <span class="logo-image">F</span>
            <span class="logo-text">FUSE</span>
        </div>

        <md-progress-circular id="toolbar-progress" ng-if="$root.loadingProgress" class="md-accent"
                              md-mode="indeterminate" md-diameter="64">
        </md-progress-circular>
    </div>

    <div layout="row" layout-align="start center">

        <ms-search-bar></ms-search-bar>

        <md-menu-bar id="user-menu">
            <md-menu md-position-mode="left bottom">
                <md-button class="user-button" ng-click="$mdOpenMenu()"
                           aria-label="User settings"
                           translate translate-attr-aria-label="TOOLBAR.USER_SETTINGS">
                    <div layout="row" layout-align="space-between center">
                        <div class="avatar-wrapper">
                            <img md-menu-align-target class="avatar" src="assets/images/avatars/profile.jpg">
                            <md-icon md-font-icon ng-class="vm.userStatus.icon"
                                     ng-style="{'color': vm.userStatus.color }"
                                     class="icon status s16">
                            </md-icon>
                        </div>
                        <span class="username" hide-xs>John Doe</span>
                        <md-icon md-font-icon="icon-chevron-down"
                                 class="icon s16" hide-xs></md-icon>
                    </div>
                </md-button>

                <md-menu-content width="3">
                    <md-menu-item class="md-indent" ui-sref="app.pages_profile">
                        <md-icon md-font-icon="icon-account" class="icon"></md-icon>
                        <md-button>My Profile</md-button>
                    </md-menu-item>

                    <md-menu-item class="md-indent" ui-sref="app.mail">
                        <md-icon md-font-icon="icon-email" class="icon"></md-icon>
                        <md-button>Inbox</md-button>
                    </md-menu-item>

                    <md-menu-item class="md-indent">
                        <md-icon md-font-icon ng-class="vm.userStatus.icon"
                                 ng-style="{'color': vm.userStatus.color }" class="icon"></md-icon>
                        <md-menu id="user-status-menu">
                            <md-button ng-click="$mdOpenMenu()" class="status" ng-class="vm.userStatus.class">
                                {{vm.userStatus.title}}
                            </md-button>
                            <md-menu-content width="2">
                                <md-menu-item class="status md-indent"
                                              ng-class="{'selected': status === vm.userStatus}"
                                              ng-repeat="status in vm.userStatusOptions">
                                    <md-icon md-font-icon="{{status.icon}}" ng-style="{'color': status.color }"
                                             class="icon"></md-icon>
                                    <md-button ng-click="vm.setUserStatus(status)">
                                        {{status.title}}
                                    </md-button>
                                </md-menu-item>
                            </md-menu-content>
                        </md-menu>
                    </md-menu-item>

                    <md-menu-divider></md-menu-divider>

                    <md-menu-item class="md-indent">
                        <md-icon md-font-icon="icon-logout" class="icon"></md-icon>
                        <md-button ng-click="vm.logout()">Logout</md-button>
                    </md-menu-item>
                </md-menu-content>
            </md-menu>
        </md-menu-bar>

        <md-menu id="language-menu" md-offset="0 72" md-position-mode="target-right target">
            <md-button class="language-button" ng-click="$mdOpenMenu()"
                       aria-label="Language" md-menu-origin md-menu-align-target>
                <div layout="row" layout-align="center center">
                    <img class="flag" ng-src="assets/images/flags/{{vm.selectedLanguage.flag}}.png">
                    <span class="iso">{{vm.selectedLanguage.code}}</span>
                </div>
            </md-button>

            <md-menu-content width="3" id="language-menu-content">
                <md-menu-item ng-repeat="(iso, lang) in vm.languages">
                    <md-button ng-click="vm.changeLanguage(lang)" aria-label="{{lang.title}}" translate
                               translate-attr-aria-label="{{lang.title}}">
                        <span layout="row" layout-align="start center">
                            <img class="flag" ng-src="assets/images/flags/{{lang.flag}}.png">
                            <span translate="{{lang.translation}}">{{lang.title}}</span>
                        </span>
                    </md-button>
                </md-menu-item>
            </md-menu-content>
        </md-menu>

        <md-button id="quick-panel-toggle" class="md-icon-button" ng-click="vm.toggleSidenav('quick-panel')"
                   aria-label="Toggle quick panel" translate translate-attr-aria-label="TOOLBAR.TOGGLE_QUICK_PANEL">
            <md-icon md-font-icon="icon-format-list-bulleted" class="icon"></md-icon>
        </md-button>
    </div>
</div>